<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/My'})" class="return"></a>
			我的糖果
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 10px;padding-left: 20px;padding-right: 20px;">
					<van-tabs type="card" @change="getTab">
						<van-tab title="赠送明细">
							<div align="center" style="padding-top: 10px;color: #858dac;border-bottom: 1px solid rgba(77, 89, 126, 0.6);padding-bottom: 10px;">
								<van-row style="font-size: 13px;">
									<van-col span="5" style="text-align: left;">交易者ID</van-col>
									<van-col span="9" style="text-align: center;">ATM奖励(枚)</van-col>
									<van-col span="4" style="text-align: center;">节点</van-col>
									<van-col span="6" style="text-align: right;">时间</van-col>
								</van-row>
							</div>
							<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
								<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
									<div align="center" style="padding-top: 10px;" v-for="(item,index) in list" :key="item.index">
										<van-row style="font-size: 12px;color: white;padding-bottom: 10px;">
											<van-col span="5" style="text-align: left;" v-text="item.provideUuid">123456</van-col>
											<van-col span="9" style="text-align: center;" v-text="item.num + ' 枚'">15枚</van-col>
											<van-col span="4" style="text-align: center;" v-text="item.nodeNumber">1</van-col>
											<van-col span="6" style="text-align: right;" v-text="item.createTime">2019-06-19 15:37:49</van-col>
										</van-row>
									</div>
								</van-list>
							</van-pull-refresh>
						</van-tab>
						<van-tab title="释放明细">
							<div align="center" style="padding-top: 10px;color: #858dac;border-bottom: 1px solid rgba(77, 89, 126, 0.6);padding-bottom: 10px;">
								<van-row style="font-size: 13px;">
									<van-col span="6" style="text-align: left;">刷单日期</van-col>
									<van-col span="6" style="text-align: center;">刷单数量</van-col>
									<van-col span="6" style="text-align: center;">释放%</van-col>
									<van-col span="6" style="text-align: right;">释放数量</van-col>
								</van-row>
							</div>
							<van-pull-refresh v-model="isLoading2" @refresh="onRefresh2" pulling-text=' '>
								<van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
									<div align="center" style="padding-top: 10px;" v-for="(item,index) in list2" :key="item.index">
										<van-row style="font-size: 12px;color: white;padding-bottom: 10px;">
											<van-col span="6" style="text-align: left;" v-text="item.createTime">2019-06-19 15:37:49</van-col>
											<van-col span="6" style="text-align: center;" v-text="item.atm">5次</van-col>
											<van-col span="6" style="text-align: center;" v-text="item.releaseRatio * 100 + ' %'">10%</van-col>
											<van-col span="6" style="text-align: right;" v-text="item.releaseNum + ' 枚'">50</van-col>
										</van-row>
									</div>
								</van-list>
							</van-pull-refresh>
						</van-tab>
					</van-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mine } from './../utils/api';
	export default {
		data() {
			return {
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				isLoading2: false,
				finished2: false,
				loading2: false,
				listLength2: 0,
				total2: 0,
				size2: 10,
				current2: 1,
				list: [],
				list2: []
			}
		},
		created() {

		},
		mounted() {
			this.getList2(); // 释放明细 [预加载]
		},
		methods: {
			getTab(type) {
				if(type == 0) {
					this.getList();
				} else if(type == 1) {
					this.getList2();
				}
			},
			getList() {
				mine.getMyCandy({
					"current": this.current,
					"size": this.size
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			getList2() {
				mine.getDetails_release({
					"current": this.current2,
					"size": this.size2
				}).then(res => {
					this.list2 = res.data.records;
					this.listLength2 = res.data.records.length;
					this.total2 = res.data.total;
				})
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onRefresh2() {
				this.getList2();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading2 = false;
				}, 500);
			},
			onLoad() {
				this.getList();
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			onLoad2() {
				if(this.total2 > this.listLength2) {
					this.getList2();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total2 > this.listLength2) {
						this.size2 += 10;
						this.loading2 = false;
					} else {
						// 加载状态结束
						this.finished2 = true;
						this.loading2 = false;
					}
				}, 500);
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 0;
	}
	
	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}
	
	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}
</style>